import { ref,onMounted,onUnmounted,Ref } from "vue";

const useClickOutside=(elementRef:Ref<null | HTMLElement>)=>{
    const isClickOutside = ref(false)
    const handler = (e:MouseEvent)=>{   
        if(elementRef.value){   //取到了页面上的HTML元素
            if(elementRef.value.contains(e.target as HTMLElement)){ //鼠标点击的元素是菜单项
                isClickOutside.value = false
            }else{
                isClickOutside.value=true
            }
        }
    }
    onMounted(()=>{
        document.addEventListener('click',handler)
    })
    onUnmounted(()=>{
        document.removeEventListener('click',handler)
    })
    return isClickOutside
}

export default useClickOutside